.login-view.kj-login-theme {
  background: #04214a url("./images/dark/bg.jpg") no-repeat center;
  background-size: 100% 100%;

  .center-bj {
    width: 65%;
    left: 50%;
    top: 50%;
    margin-left: -54%;
    margin-top: -190px;
    height: 510px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .login-main-content {
    background: #020a58b5;
    box-shadow: 0 2px 10px 0 #0022666e;
    border: 1px #031a8d solid;
    color: #5fbfed;
    margin-top: 60px;

    .toggle-button {
      background: url("./images/dark/login-sprite01.png") no-repeat right center;
      background-size: auto 100%;

      &:hover {
        background: url("./images/dark/login-sprite03.png") no-repeat right center;
        background-size: auto 100%;
      }
    }

    .toggle-button.password {
      background: url("./images/dark/login-sprite02.png") no-repeat right center;
      background-size: auto 100%;

      &:hover {
        background: url("./images/dark/login-sprite04.png") no-repeat right center;
        background-size: auto 100%;
      }
    }

    .title-area {
      color: #04eefe;
    }

    .login-form {
      ::v-deep.el-input--prefix .el-input__inner {
        border: 1px solid #021383c4;
        background: #020e4f73;
        color: #5fbfed;

        &:-webkit-autofill {
          box-shadow: 0 0 0 1000px #020d57 inset !important;
          color: #5fbfed !important;
          -webkit-text-fill-color: #5fbfed;
          font-size: 16px;
          -webkit-font-size: 16px !important;
        }

        &:focus {
          border: 1px solid #0a67da;
          color: #1a7af0;
        }
      }

      ::v-deep.el-input__prefix {
        .el-input__icon {
          color: #5fbfed;
        }
      }

      .show-pwd {
        color: #b0c5eb;
      }

      .login-button {
        background-color: #092797;
        border-color: #023aa7;

        &:hover {
          background-color: #072aa8;
          color: #cbe6ff;
        }

        &.is-disabled {
          background-color: #092381;
          color: #5d7bb1;
        }
      }

      ::v-deep {
        .verify-bar-area {
          border: 1px solid #033670;
          background: #01114c8a;
        }

        .verify-bar-area .verify-left-bar {
          background: #062d85;

          &.begin {
            border-color: #0428a9 !important;
          }
        }

        .verify-bar-area .verify-move-block {
          background: #0326a5;

          &.begin {
            border-color: #0428a9 !important;
            background: #0326a5 !important;

            .verify-icon.el-icon-arrow-right {
              color: #5fbfe8 !important;
            }
          }
        }

        .el-form-item {
          .el-form-item__error {
            top: 90%;
            color: #e5ab06;
          }

          .el-input input:placeholder { /* Mozilla Firefox 4 to 18 */
            color: #20579c;
            font-size: 15px;
          }

          .el-input input::placeholder { /* Mozilla Firefox 19+ */
            color: #20579c;
            font-size: 15px;
          }
        }
      }
    }

    .mobile {
      border: 1px solid #062d85;
      color: #5faec5;

      &:hover {
        color: #fff;
        background-color: #023aa7;
      }
    }
  }

  @media screen and (max-width: 1000px) {
    .center-bj {
      display: none;
    }

    .login-main-content {
      left: 50%;
      margin-left: -220px;
    }
  }
}
